<template>
  <ContentLayout>
    <SearchBox
      title="属性管理"
      @handleQuery="handleQuery"
      @resetQuery="resetQuery"
      :singleLine="true"
    >
      <template slot="form">
        <el-form
          class="search-form"
          ref="searchForm"
          :model="searchForm"
          label-width="auto"
          size="medium"
        >
          <el-form-item
            :label="$t('function-capp.evEngine_capp_procedure_code')"
          >
            <el-input
              v-model="searchForm.operationCode"
              :placeholder="
                $t('common.please_input') +
                ' ' +
                $t('function-capp.evEngine_capp_procedure_code')
              "
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('function-capp.evEngine_capp_procedure_name')"
          >
            <el-input
              v-model="searchForm.operationName"
              :placeholder="
                $t('common.please_input') +
                ' ' +
                $t('function-capp.evEngine_capp_procedure_name')
              "
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('function-capp.evEngine_capp_procedure_type')"
          >
            <el-select
              style="display: block"
              v-model="searchForm.operationType"
              :placeholder="
                $t('common.please_input') +
                ' ' +
                $t('function-capp.evEngine_capp_procedure_type')
              "
              clearable
            >
              <el-option
                v-for="item in operationTypeItems"
                :key="item.k"
                :label="item.v"
                :value="item.k"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </SearchBox>

    <EvTable
      ref="table"
      :options="{ data, columns, height: '720px' }"
      :tablePage="page"
      :selectRecords="selectRecords"
      @handlePageChange="handlePageChange"
    >
      <template #toolbar_buttons>
        <EvButton icon="el-icon-plus" type="primary" @click="add">{{
          $t("common.common_operation_add")
        }}</EvButton>
        <EvButton icon="el-icon-delete" @click="batchDelete" type="info">{{
          $t("common.common_operation_delete")
        }}</EvButton>
      </template>
      <template #operation_default="{ scope }">
        <el-button type="text" @click="edit(scope)">{{
          $t("common.common_operation_update")
        }}</el-button>
        <el-button type="text" @click="see(scope)">{{
          $t("common.common_operation_view")
        }}</el-button>
      </template>
      <template #insertUser_name="{ scope }">
        {{ scope.row.insertUser ? scope.row.insertUser.name : "" }}
      </template>
      <template #enabledStatus="{ scope }">
        {{ scope.row.enabledStatus === "1" ? "启用" : "禁用" }}
      </template>
    </EvTable>
    <!-- 编辑详情 -->
    <detail ref="procedureDetail" @handleConfirm="handleConfirm"></detail>
  </ContentLayout>
</template>
<script>
import ContentLayout from "@/layout/contentLayout.vue";
import SearchBox from "@/components/EvTable/searchBox.vue";
import detail from "./detail.vue";
export default {
  components: {
    ContentLayout,
    SearchBox,
    detail,
  },
  props: ["currentItem"],
  data() {
    return {
      /* 搜索项表单 */
      searchForm: {
        name: null,
        code: null,
      },
      commonSearch: null,
      selectRecords: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [
        { type: "checkbox", fixed: "left", align: "center", width: 50 },
        {
          title: "common.serial_number",
          align: "center",
          width: 60,
          type: "seq",
        },
        {
          title: "属性",
          field: "attribute",
        },
        {
          title: "属性类型",
          field: "type",
        },
        {
          title: "名称",
          field: "comment",
        },
        {
          title: "是否表单显示",
          field: "isShowSave",
        },
        {
          title: "是否列表显示",
          field: "isShowSelects",
        },
        {
          title: "是否高级搜索",
          field: "isShowSearch",
        },
        {
          title: "是否模糊搜索",
          field: "isShowLikes",
        },
        {
          title: "是否导入",
          field: "isImport",
        },
        {
          title: "是否导出",
          field: "isExport",
        },
        {
          title: "common.common_operate",
          field: "table_operate",
          fixed: "right",
          align: "left",
          width: 120,
          resizable: false,
          slots: { default: "operation_default" },
        },
      ],
      data: [],
      form: {},
      microservices: "function-user",
      resource: "Attribute",
      operationTypeItems: [],
    };
  },
  mounted() {
    this.loadData();
    this.getDictionarys();
  },
  methods: {
    async edit(scope) {
      await this.getObjectById(scope.row.id);
      let params = {
        type: "edit",
        disabled: false,
        drawerTitle: "编辑属性",
      };
      this.$refs.procedureDetail.open(params, this.form);
    },
    async see(scope) {
      await this.getObjectById(scope.row.id);
      let params = {
        type: "see",
        disabled: true,
        drawerTitle: "查看属性",
      };
      this.$refs.procedureDetail.open(params, this.form);
    },
    add() {
      this.form = {};
      let params = {
        type: "add",
        disabled: false,
        drawerTitle: this.$t("function-capp.add_procedure"),
      };
      this.$refs.procedureDetail.open(params);
    },
    batchDelete() {
      this.selectRecords = this.$refs.table.getSelectRecords();
      if (this.selectRecords && this.selectRecords.length == 0) {
        this.$message.warning(this.$t("common.common_unselect_data"));
        return;
      }
      this.$confirm(
        this.$t("common.common_delete_remind"),
        this.$t("common.common_info"),
        {
          confirmButtonText: this.$t("common.common_operation_confirm"),
          cancelButtonText: this.$t("common.common_operation_cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$server()
            .batchDelete(this.microservices, this.resource, this.selectRecords)
            .then(() => {
              this.$message.success(this.$t("common.common_delete_success"));
              this.handleQuery();
            })
            .catch((response) => {
              this.$message.error(response.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("common.common_cancel_delete"),
          });
        });
    },
    getDictionarys() {
      let titles = "工序类型";
      this.$server()
        .batchQueryDictionary(titles)
        .then((response) => {
          this.operationTypeItems = response.filter(
            (f) => f.title == "工序类型"
          )[0].details;
        })
        .catch((response) => {
          this.$message.error(response.message);
        });
    },
    handleConfirm() {
      this.loadData();
    },
    // 执行搜索
    handleQuery() {
      this.page.currentPage = 1;
      this.loadData();
    },
    resetQuery() {
      this.searchForm = {
        name: null,
        code: null,
      };
      this.page.currentPage = 1;
      this.loadData();
    },
    // 加载数据
    loadData() {
      let params = [];
      Object.keys(this.searchForm).forEach((el) => {
        if (this.searchForm[el]) {
          params.push([el, "LIKE", `%${this.searchForm[el]}%`]);
        }
      });
      if (params.length > 0) {
        this.commonSearch = { AND: [...params] };
      } else {
        this.commonSearch = null;
      }
      let condition = null;
      if (this.commonSearch && JSON.stringify(this.commonSearch) != "{}") {
        let common = JSON.parse(JSON.stringify(this.commonSearch));
        if (!condition) {
          condition = { AND: [] };
        }
        condition.AND = [...condition.AND, ...common.AND];
      }
      this.$server()
        .query(
          this.microservices,
          this.resource,
          {
            AND: [
              ["menu", "=", this.currentItem.code],
              ["isShow", "=", true],
            ],
          },
          "insertTime desc",
          { current: this.page.currentPage, size: this.page.pageSize },
          true
        )
        .then((response) => {
          this.page.total = response.total;
          this.data = response.list;
        })
        .catch((response) => {
          this.$message.error(response.data.message);
        });
    },
    // 获取详情
    async getObjectById(id) {
      await this.$server()
        .getObjectById(this.microservices, this.resource, id)
        .then((result) => {
          this.form = result;
        })
        .catch((response) => {
          this.$message.error(response.data.message);
        });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.loadData();
    },
  },
};
</script>
<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    margin-bottom: 10px;
  }
}
.property-item {
  padding: 0 15px;
  line-height: 28px;
  color: #fff;
  border-radius: 14px;
  width: 70px;
}

.property-NORMAL {
  background-color: #53c77b;
}

.property-WARNING {
  background-color: #f3c126;
}

.property-ERROR {
  background-color: #ec5758;
}

.property-INFO {
  background-color: #439ef1;
}

.property-NONE {
  background-color: #a9bcc8;
}
</style>
